<template>
	<view v-if="pageShow">
		<u-navbar title="抢单大厅" :titleStyle="{fontWeight:'800'}" bgColor="#fff" placeholder>
			<view class="u-nav-slot" slot="left">
				<view class="flexleft" @click="kgclick">
					<view class="xiaohei bold">{{userinfo.kg_status==1?'点击开工':"点击收工"}}</view>
					<u-icon name="arrow-down" size="12" color="#333"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="duijiang" @touchstart="voiceBegin" @touchend="voiceEnd"
			v-if="userinfo.kg_status==2 && renzhengStatus && !duijiang">对讲</view>
		<image class="duijiang1" v-if="duijiang" :src="playuserinfo.avatar_text" mode=""></image>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff radius">
				<view class="textcenter xiaohei">今日接单情况</view>
				<view class="flexbetween margin_top">
					<view class="flexcolumn">
						<view class="titletext bold hei_text">{{userinfo.today_order_num}}单</view>
						<view class="xiaohei margin_top1">今日接单量</view>
					</view>
					<view class="flexcolumn">
						<view class="titletext bold hei_text">{{userinfo.jxz_order_num}}单</view>
						<view class="xiaohei margin_top1">进行中</view>
					</view>
					<view class="flexcolumn">
						<view class="titletext bold hei_text">{{userinfo.today_order_price}}元</view>
						<view class="xiaohei margin_top1">今日收入</view>
					</view>
				</view>
			</view>
			<view class="flexcolumn" v-if="!renzhengStatus">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui" style="width: 400rpx; text-align: center;">您还未解锁此功能，请完成司机认证之后再来看看吧！
				</view>
			</view>
			<view class="flexcolumn" v-if="!list.length && userinfo.kg_status==1 && renzhengStatus">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui" style="width: 400rpx; text-align: center;">未开工，点击左上角开始接单吧！</view>
			</view>
			<view class="flexcolumn" v-if="!list.length && userinfo.kg_status==2 && renzhengStatus">
				<view class="placeholderimage" style="margin-top: 200rpx;"></view>
				<view class="xiaohui" style="width: 400rpx; text-align: center;">听单中</view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="(item,index) in list"
				v-if="userinfo.kg_status==2 && renzhengStatus">
				<view class="flexbetween">
					<view class="titletext hei_text bold">{{item.order_no}}</view>
					<!-- 电话叫车显示播放语音按钮 -->
					<u-icon name="volume" size="36" :color="currentplayAudio==item.id?'#ffa126':'#3478f5'" v-if="item.type==2" @click="bofang(item)"></u-icon>
				</view>
				<view class="margin_top flexbetween">
					<view class="flexleft">
						<u-icon name="clock" size="16" color="#999"></u-icon>
						<view class="hei_text main_size margin_left1 bold">{{item.createtime_text}}</view>
					</view>
					<view class="xiaolan" v-if="item.type==4">座位：{{item.zw_num}}</view>
				</view>
				<view class="flexbetween">
					<view class="">
						<view class="flexleft margin_top" v-if="item.type!=2">
							<u-icon name="map-fill" size="16" color="#ffa126"></u-icon>
							<view class="margin_left1 xiaohui" style="width: 480rpx;">{{item.start_address}}</view>
						</view>
						<view class="flexleft margin_top" v-if="item.type==4">
							<u-icon name="map-fill" size="16" color="#3478f5"></u-icon>
							<view class="margin_left1 xiaohui" style="width: 500rpx;">{{item.end_address}}
							</view>
						</view>
					</view>
					<view class="qiangdan" @click="qiangdan(item)">抢</view>
				</view>
			</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js");
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				modal: {
					modalShow: false,
					title: "是否确认抢单？",
				},
				text: '志辉',
				voicePath: '',
				is_login: false,
				userinfo: {},
				luyin: null,
				luyinnum: 0,
				lat: "34.83172",
				lng: "113.52446",
				getListTimer: null,
				list: [],
				listid: "",
				renzhengStatus: false, //认证状态
				pageShow: false,
				total: 0,
				playuserinfo: {},
				duijiang: false,
				bfstate:1,
				playflag:false,//页面第一次进来
				currentplayAudio:"",
			}
		},
		
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
				self.uploadImageService(res.tempFilePath)
			});
			
			if(uni.getStorageSync("luyinList") && uni.getStorageSync("luyinList").length){
				// this.xh_playFn()
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			}
			// innerAudioContext.src = "http://hitchhiking.kongzhongwangluo.top/uploads/20230828/8d600d0af29c5a1560619c015eb8db27.mp3";
			// innerAudioContext.play();
		},
		onHide() {
			console.log(101112, "销毁");
			clearInterval(this.getListTimer)
		},
		// watch:{
		// 	xh_play(){
		// 		this.xh_playFn()
		// 	}
		// },
		methods: {
			xh_playFn() {
				if (uni.getStorageSync("luyinList").length) {
					let arr = uni.getStorageSync("luyinList")
					console.log(arr, "数据内容");
					if (arr.length>0) {
						this.xhbofang(arr[0])
						this.ybf(arr[0].id)
						let arr1 = arr.shift()
						uni.setStorageSync("luyinList",JSON.parse(JSON.stringify(arr)))
					}
				}
			},
			ybf(id) {
				httpRequest.request('/api/order/addPlay', 'GET', {
					id:id
				}, false, false, true).then(res => {})
			},
			xhbofang(item) {
				console.log(item, "惊雷");
				this.playflag=true
				var music = null
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.sessionCategory = "ambient"
				// music.sessionCategory = "ambient"
				music.src = item.dhly_url_text;
				music.play()
				music.onEnded(() => {
					this.playflag=false
					music = null
					this.xh_playFn()
				})
			},
			bofang(item) {
				this.currentplayAudio = item.id
				var music = null
				music = uni.createInnerAudioContext(); //创建播放器对象
				// music.sessionCategory = "ambient"
				music.src = item.dhly_url_text;
				// music.src = "http://hitchhiking.kongzhongwangluo.top/uploads/ly/015582698382202310231554477888391.wav";
				// music.src = "http://hitchhiking.kongzhongwangluo.top/uploads/20230828/2621030a10fe21157d6c93f51c1877a6.mp3";
				music.play()
				music.onEnded(() => {
					music = null
					this.currentplayAudio = ""
				})
				
				
			},
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url, "发送语音中").then(res => {
					console.log(res, "获取到的线上文件");
					this.upmp3(res.fullurl)
				}).catch(err => {});
			},
			upmp3(url) { //上传录音到接口
				httpRequest.request('/api/user/addYydj', 'GET', {
					url
				}, false, false, true).then(res => {})
			},
			voiceBegin() { //开始录音
				this.luyin = setInterval(() => {
					this.luyinnum++;
					if (this.luyinnum == 1) {
						this.luyinnum = 0;
						recorderManager.start();
						clearInterval(this.luyin);
					}
				}, 100)
			},
			voiceEnd() { //结束录音
				console.log('录音结束');
				clearInterval(this.luyin);
				recorderManager.stop();
			},
			modalSure() {
				if (this.modal.title == "是否确认抢单？") {
					httpRequest.request('/api/order/sjjd', 'GET', {
						id: this.listid
					}, false, false, true).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: "/pages/index/jiedan?id=" + this.listid
							})
						} else {
							httpRequest.toast(res.msg);
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getList()
						_this.getListTimer = setInterval(() => {
							_this.getList()
							_this.getaudioList()
						}, 5000)

					}
				});
			},
			getList() {
				httpRequest.request('/api/order/qdindex', 'GET', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					
					this.list = res.data
					if (res.data.length > this.total) {
						// httpRequest.toast("新订单来了")
						this.scanAudio()
					}
					this.total = res.data.length
					// uni.removeStorageSync("luyinList")
					// console.log(uni.getStorageSync("luyinList"), "数据内容");
					let arr = []
					if (uni.getStorageSync("luyinList").length) {
						arr = uni.getStorageSync("luyinList")
					}
					
					let arr1 = JSON.parse(JSON.stringify(arr))
					res.data.forEach(item => {
						if (item.type == 2 && item.is_play) {
							let num = 0
							arr.forEach(current=>{
								if(current.id==item.id){
									num=1
									console.log(current,arr,"lalala ");
								}
							})
							if(num==0){
								arr.push(item)
								console.log(arr,"嘿嘿嘿嘿嘿嘿");
							}
						}
					})
					if (arr.length != arr1.length) {
						uni.setStorageSync("luyinList", arr)
					}
					if(this.playflag==false){
						this.xh_playFn()
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			scanAudio() {
				var music = null
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.sessionCategory = "ambient"
				music.src = require("@/static/audio/1sbzevidi.mp3");
				music.play()
				music.onEnded(() => {
					music = null
				})
			},
			getaudioList() {
				let _this = this
				httpRequest.request('/api/user/payYydj', 'GET', {}, false, false, true).then(res => {
					// innerAudioContext.src = "http://hitchhiking.kongzhongwangluo.top/uploads/20230828/8d600d0af29c5a1560619c015eb8db27.mp3";
					if (res.code == 1) {
						_this.playuserinfo = res.data.userinfo
						_this.duijiang = true
						innerAudioContext.src = res.data.url_text;
						innerAudioContext.play();
						innerAudioContext.onEnded(() => {
							_this.duijiang = false
						})
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}, false, false, true).then(res => {
					this.userinfo = res.data
					this.pageShow = true
					if (!res.data.shopapply || res.data.shopapply.status != 2) { //未实名认证
						this.renzhengStatus = false
					} else { //已实名认证
						this.renzhengStatus = true
						if (res.data.kg_status == 2 && res.data.shopapply.status ==
							2) { //如果为开工状态重复请求接口，否则清楚所有定时器展示空状态
							// #ifdef APP-PLUS
							this.getLocation()
							// #endif
							// #ifdef H5
							this.getList()
							this.getListTimer = setInterval(() => {
								this.getList()
								this.getaudioList()
							}, 3000)
							// #endif
						} else {
							clearInterval(this.getListTimer)
						}
					}


				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			kgclick() {
				httpRequest.request('/api/user/profile', 'GET', {
					kg_status: this.userinfo.kg_status == 1 ? 2 : 1
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					this.init()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			qiangdan(item) {
				if(this.bfstate == 1){
					this.bfstate = 2
					this.listid = item.id
					this.modalSure()
				}
				setTimeout(()=>{
					this.bfstate = 1
				},5000)
				// this.modal.modalShow = true
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.duijiang {
		background-color: #3478f5;
		color: #ffffff;
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 400rpx;
		left: 30rpx;
		z-index: 100;
	}

	.duijiang:active {
		background-color: rgba(52, 120, 245, .8);
		color: #fff;
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
	}

	.duijiang1 {
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx auto;
		border-radius: 50%;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		bottom: 400rpx;
		left: 30rpx;
		z-index: 100;
	}

	.qiangdan {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #3478f5;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 50%;
	}

	.qiangdan:active {
		background-color: rgba(52, 120, 245, .8);
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 50%;
	}
</style>